<template>
  <view class="card">
    <view class="filterDiv">
      <u-tabs-swiper ref="tabs" name="label" :list="tags" :is-scroll="false" @change="tagChange" :current="currentIndex" class="cardTab" active-color="#486be2"></u-tabs-swiper>
    </view>
    <view class="cardListDiv" v-if="cardList.length > 0">
      <scroll-view scroll-y class="cardListScroll" @scrolltolower="getList">
        <view class="cardList">
          <view class="cardItem" :class="item.status == 2 ? 'cardItemDisable' : ''" v-for="item in cardList" :key="item.id">
            <image
              :src="getStaticDir('/cardItem.png')"
              class="cardBg"
            />
            <view class="cardItemContent">
              <view class="cardTitle">
                <view class="cardName">
                  {{item.name}}
                </view>
                <view class="cardNum">
                  ×10
                </view>
              </view>
              <view class="cardsub">
                一盒
              </view>
              <view class="cardButton" v-if="item.status == 1">
                <view class="btn" @click="handleSend">赠送</view>
                <view class="btn" @click="handleChange">兑换</view>
              </view>
            </view>

          </view>
        </view>
      </scroll-view>
    </view>
    <view class="empty" v-else-if="!loading">
      <image class="emptyImage" :src="getStaticDir('/empty.png')" />
      <text>暂无卡券</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      tags: [
        { name: '全部', num: '', active: true },
        { label: '未使用', num: '', active: false, code: 'HK_WAITING_GRAB' },
        { label: '已使用', num: '', active: false, code: 'HK_WAITING_RECEIVE' }
      ],
      cardList:[
        {
          id:1,name:'大金柜兑换卡券',status:1
        },
        {
          id:2,name:'小金柜兑换卡券',status:1
        },
        {
          id:3,name:'小金柜兑换卡券',status:2
        }
      ],
      loading: false,
      page: 0
    };
  },
  methods: {
    tagChange(index){
      console.log(index);
      this.currentIndex = index;
    },
    handleSend(){
      uni.navigateTo({
        url: '/pages/card/send/send'
      })
    },
    handleChange(){
      uni.navigateTo({
        url: '/pages/card/change/change'
      })
    }
  },
  computed: {

  },
  watch: {

  },
  // 页面周期函数--监听页面加载
  onLoad() {
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  onPullDownRefresh() {},
  // 页面上拉触底事件的处理函数
  onReachBottom() {},
  // 用户点击右上角分享
  onShareAppMessage() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  onPageScroll(e) {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
